<template>
  <div class="select-wrapper">
    <div class="nav">
      <div class="left">
        <ul>
          <!-- <li>大学</li>
          <li>学生画像</li> -->
        </ul>
      </div>
      <div class="right"></div>
    </div>
    <div class="select-center">
      <div class="select">
        <div class="select-input">
          <input
            type="text"
            placeholder="请输入学生姓名"
            v-model="searchValue"
          />
        </div>
        <div class="select-btn">
          <button @click="select">搜索</button>
          <button @click="gotoHight">高级搜索</button>
          <button @click="TJ = true">新增</button>
        </div>
      </div>
      <div class="table" v-if="isShow">
        <table v-if="studentInfo?.length">
          <thead>
            <tr>
              <th>姓名</th>
              <th>学号</th>
              <th>班级</th>
              <th>专业</th>
              <th>类型</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- <el-tooltip content="点击跳转详情" placement="left" v-for="(student, index) in studentInfo" :key="index"> -->
            <!-- <tr class="student-list" @click="toDetail(student.stuId) "> -->
            <tr
              class="student-list"
              style="height: 40px"
              v-for="(student, index) in studentInfo"
              :key="index"
            >
              <td @click="toDetail(student.stuId)">{{ student.stuName }}</td>
              <td>{{ student.stuId }}</td>
              <td>{{ student.classNum }}</td>
              <td>{{ student.major }}</td>
              <td>{{ student.eduType }}</td>
              <td>
                <el-button
                  style="margin-right: 20px"
                  type="primary"
                  plain
                  @click=";(dialogFormVisible = true), update(student)"
                  >更新</el-button
                >
                <el-button @click="deleteStu(student.stuId)" type="danger" plain
                  >删除</el-button
                >
              </td>
            </tr>
            <!-- </el-tooltip> -->
          </tbody>

          <!-- 分页 -->
          <el-pagination
            small
            layout="prev, pager, next"
            :total="pageTotal"
            :page-size="10"
            @current-change="changeSize($event)"
          ></el-pagination>
        </table>
      </div>
      <!-- </div>
    <div style="text-align: center; margin-top: 20px;">
    <el-button type="primary" @click="toDetail">跳转至详情</el-button> -->
    </div>

    <!-- 更新 -->
    <el-dialog
      @close="clear"
      style="width: 600px"
      v-model="dialogFormVisible"
      title="信息更新"
    >
      <el-form :model="form1">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            style="width: 200px"
            placeholder="更新姓名"
            v-model="form1.stuName"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="学号" :label-width="formLabelWidth">
          <el-input
            style="width: 200px"
            placeholder="学号禁止修改"
            disabled
            v-model="form1.stuId"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="班级" :label-width="formLabelWidth">
          <el-input
            style="width: 200px"
            placeholder="更新班级"
            v-model="form1.classNum"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="专业" :label-width="formLabelWidth">
          <el-input
            style="width: 200px"
            placeholder="更新专业"
            v-model="form1.major"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateStu">确定</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>

     <!-- 添加 -->
     <el-dialog style="width: 600px;" v-model="TJ" title="新增学生" center>
      <el-text class="mx-1" style="margin-left: 40%;" size="large">请选择上传方式</el-text>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="SD = true">手动导入</el-button>
          <!-- <el-tab-pane label="书院信息" name="E"></el-tab-pane> -->
          <el-button type="primary"  @click="DR = true, TJ = false">
            Excel导入
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- Excel -->
    <el-dialog style="width: 600px;" v-model="DR" title="新增学生" center>
      <span style="margin-left: 40%;">
        <el-upload class="upload-demo" action="/api/student/excel_in">
          <el-button style="margin-left: 220px;" type="primary">选择文件</el-button>
        </el-upload>
      </span>
    </el-dialog>
    <!-- 手动 -->
    <el-dialog @close="TJ = false" style="width: 600px;" v-model="SD" title="新增学生" center>
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="添加姓名" v-model="form.stuName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学号" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="添加学号" v-model="form.stuId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="班级" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="添加班级" v-model="form.classNum" autocomplete="off" />
        </el-form-item>
        <el-form-item label="专业" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="添加专业" v-model="form.major" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学院" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="添加学院" v-model="form.institute" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="save">确定</el-button>
          <el-button type="primary" @click="SD = false; TJ = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addstudent, updatestudent, deletestudent } from '@/api/student'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  data() {
    return {
      TJ: false,
      SD: false,
      DR: false,
      dialogFormVisible: false,
      form: {
        stuName: '',
        stuId: '',
        classNum: '',
        major: '',
        institute: '',
        eduType: '',
      },
      form1: {
        stuName: '',
        stuId: '',
        classNum: '',
        major: '',
        institute: '',
      },
      formLabelWidth: '180px',
      updateInfo: [],
      studentInfo: [],
      isShow: false,
      searchValue: '',
      pageTotal: 0,
    }
  },
  methods: {
    deleteStu(stuId) {
      console.log('123')
      ElMessageBox.confirm('是否确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deletestudent(stuId).then((response) =>
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
          )
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          })
        })
    },
    update(student) {
      this.form1.stuName = student.stuName
      this.form1.stuId = student.stuId
      this.form1.classNum = student.classNum
      this.form1.major = student.major
    },
    save() {
      addstudent(this.form).then((response) => {
        this.$message({
          message: '添加成功',
          type: 'success',
        })
      })
    },
    updateStu() {
      updatestudent(this.form1).then((response) => {
        this.$message({
          message: '更新成功',
          type: 'success',
        })
      })
    },
    clear() {
      this.form = {}
    },
    toDetail(Id) {
      // debugger
      this.$router.push('/student-detail/' + Id)
    },
    gotoHight() {
      this.$router.push('/selectheight')
    },
    //试图用封装的方法，但是不可行，有错
    // select() {
    //   this.isShow = true
    //   searchStudent(this.searchValue)
    //     .then(response => {
    //       const { data: res } = response
    //       if (res.code == 200) {
    //         this.studentInfo = res.data.data
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },

    select(event, pageNum = 1, pageSize = 10) {
      this.isShow = true
      this.$http
        .post(`/api/student/search`, {
          stuName: this.searchValue,
          pageNum,
          pageSize,
        })
        .then(
          (response) => {
            const { data: res } = response
            if (res.code == 200) {
              this.studentInfo = res.data.data
              this.pageTotal = res.data.total
            }
          },
          (err) => {
            return err
          }
        )
    },
    changeSize(val) {
      this.select('', val)
    },
  },
}
</script>

<style lang="scss" scoped>
.select-wrapper {
  background-image: url('../assets/bg.jpg');
  background-size: cover;
  height: 100vh;

  .student-list:hover {
    background-color: #1c689c;
  }

  .nav {
    width: 100%;
    height: 160px; //把搜索盒子往下移动40像素，挡logo
    display: flex;

    .left {
      width: 70%;

      ul {
        display: flex;
        list-style: none;
        align-items: center;

        li {
          height: 120px;
          width: 30%;
          font-size: 25px;
          line-height: 120px;
          color: #fff;
          text-align: center;
        }

        :nth-child(2) {
          border-left: 1px solid #fff;
        }
      }
    }

    .right {
      width: 30%;
      display: flex;
      justify-content: flex-end;
    }
  }

  .select-center {
    width: 100%;
    height: 120px;

    .select {
      width: 80%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;

      .select-input {
        width: 500px;

        input {
          width: 100%;
          height: 50px;
          border-radius: 8px;
          padding-left: 10px;
          font-size: 15px;
        }
      }

      .select-btn {
        width: 200px;
        height: 50px;
        display: flex;

        button {
          width: 120px;
          margin-left: 15px;
          border-radius: 5px;
          color: #fff;
          border: none;
          background-color: #1c689c;
          cursor: pointer;
        }
      }
    }

    .table {
      table {
        width: 80%;
        margin: 0 auto;
        text-align: center;
        border-radius: 8px;
        border-collapse: collapse;
        padding: 10px;
        background-color: #fff;

        thead {
          background-color: #ecf3fd;
        }
      }

      td,
      th {
        border-top: 1px solid #ddd;
      }
    }
  }
}
.img {
  height: 60px;
  width: 60px;
}
</style>
